<template>
  <div class="param-info" v-if="Object.keys(paramInfo).length !== 0">
      <table v-for="(items,index) in paramInfo.sizes" :key="index" class="table1">
         <tr v-for="(tr,indexY) in items" :key="indexY">
            <td v-for="(item, indexZ) in tr" :key="indexZ">{{item}}</td>
         </tr>
      </table>

      <table  class="table2">
         <tr v-for="(item,index) in paramInfo.infos" :key="index">
            <td>{{item.key}}</td>
            <td>{{item.value}}</td>
         </tr>
      </table>

      <div class="info-img" v-if="paramInfo.infos.images">
         <img :src="paramInfo.infos.images[0]" alt="">
      </div>
  </div>
</template>

<script>
export default {
  props: {
    paramInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
      // console.log(this.paramInfo.infos)
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.param-info{
    padding: 10px;
    font-size: 14px;
}

.table2 td:first-of-type{
    width: 60px;
}

.table2 td:last-of-type{
    color:#eb4868
}
.table1,.table2{
    width: 100%;
    border:1px solid #eee;
    border-collapse: collapse;
    margin-bottom: 10px;
    tr{
        height: 36px;
        text-align: center;
        td{
           border:1px solid #eee; 
        }
    }
}
.info-img img{
  width: 100%;
  margin-top: 10px;
}

</style>
